<script setup>
import { ElMessage } from 'element-plus'
import useClipboard from 'vue-clipboard3'
const { toClipboard } = useClipboard()

const download = text => {
  toClipboard(text)
  ElMessage({
    message: '复制成功',
    type: 'success'
  })
}

const dome1 = () => {
  download(`.nature-1 {
  width: 50px;
  height: 50px;
  background: #ffd738;
  border-radius: 50%;
  display: grid;
}

.nature-1::before,
.nature-1::after {
  content: "";
  grid-area: 1/1;
  background: inherit;
  clip-path: polygon(0 0, 50% 40%, 100% 0, 60% 50%, 100% 100%, 50% 60%, 0 100%, 40% 50%);
  animation: n1 1s infinite alternate;
  transform: rotate(var(--r, 0)) scale(1)
}

.nature-1::after {
  --r: 45deg;
}

@keyframes n1 {
  100% {
    transform: rotate(var(--r, 0)) scale(1.4)
  }
}`)
}
const dome2 = () => {
  download(`.nature-2 {
  width: 60px;
  height: 60px;
  display: grid;
  border-radius: 50%;
  background: radial-gradient(circle 15px, #ffd738 90%, #0000);
  filter: drop-shadow(0px 0px 1px #ffd738);
  animation: n2 1s infinite alternate linear;
}

.nature-2::before,
.nature-2::after {
  content: "";
  grid-area: 1/1;
  border-radius: 50%;
  background:
    linear-gradient(#ffd738 0 0) center/100% 5px,
    linear-gradient(#ffd738 0 0) center/5px 100%;
  background-repeat: no-repeat;
  -webkit-mask: radial-gradient(farthest-side, #0000 60%, #000 61%);
  mask: radial-gradient(farthest-side, #0000 60%, #000 61%);
}

.nature-2::after {
  transform: rotate(45deg);
}

@keyframes n2 {
  100% {
    filter: drop-shadow(0px 0px 20px #ffd738)
  }
}`)
}
const dome3 = () => {
  download(`.nature-3 {
  width: 50px;
  height: 50px;
  display: flex;
  filter: drop-shadow(0px 0px 1px #8d847f);
  animation: n3 1s infinite alternate linear;
}

.nature-3:before {
  content: "";
  flex: 1;
  background: #8d847f;
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle closest-side at 66% 40%, #0000 115%, #000 118%);
  mask: radial-gradient(circle closest-side at 66% 40%, #0000 115%, #000 118%);
}

@keyframes n3 {
  100% {
    filter: drop-shadow(0px 0px 20px #8d847f)
  }
}`)
}
const dome4 = () => {
  download(`.nature-4 {
  width: 50px;
  height: 50px;
  background-color: #8d847f;
  border-radius: 50%;
  animation: n4 3s infinite;
}

@keyframes n4 {
  12.5% {
    background-image: radial-gradient(80% 65% at left, #0000 94%, #fff9)
  }

  25% {
    background-image: linear-gradient(90deg, #0000 50%, #fff9 0)
  }

  37.5% {
    background-image: radial-gradient(80% 65% at right, #fff9 94%, #0000)
  }

  50% {
    background-image: linear-gradient(#fff9 0 0)
  }

  62.5% {
    background-image: radial-gradient(80% 65% at left, #fff9 94%, #0000)
  }

  75% {
    background-image: linear-gradient(-90deg, #0000 50%, #fff9 0)
  }

  87.5% {
    background-image: radial-gradient(80% 65% at right, #0000 94%, #fff9)
  }
}`)
}
const dome5 = () => {
  download(`.nature-5 {
  width: 80px;
  height: 40px;
  border-radius: 100px 100px 0 0;
  position: relative;
  overflow: hidden;
}

.nature-5:before {
  content: "";
  position: absolute;
  inset: 0 0 -100%;
  background:
    radial-gradient(farthest-side, #ffd738 80%, #0000) left 70% top 20%/15px 15px,
    radial-gradient(farthest-side, #020308 92%, #0000) left 65% bottom 19%/12px 12px,
    radial-gradient(farthest-side, #ecfefe 92%, #0000) left 70% bottom 20%/15px 15px,
    linear-gradient(#9eddfe 50%, #020308 0);
  background-repeat: no-repeat;
  animation: n5 2s infinite;
}

@keyframes n5 {

  0%,
  20% {
    transform: rotate(0)
  }

  40%,
  60% {
    transform: rotate(.5turn)
  }

  80%,
  100% {
    transform: rotate(1turn)
  }
}`)
}
const dome6 = () => {
  download(`.nature-6 {
  width: 80px;
  height: 40px;
  border-radius: 100px 100px 0 0;
  background:
    linear-gradient(0deg, #0000, #fff, #0000) 70% 30%,
    linear-gradient(90deg, #0000, #fff, #0000) 72% 32%,
    linear-gradient(0deg, #0000, #fff, #0000) 26% 42%,
    linear-gradient(90deg, #0000, #fff, #0000) 23% 44%,
    linear-gradient(0deg, #0000, #fff, #0000) 51% 54%,
    linear-gradient(90deg, #0000, #fff, #0000) 51% 53% #020308;
  background-size: 2px 10px, 10px 2px;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

.nature-6:before,
.nature-6:after {
  content: "";
  position: absolute;
  inset: 100% auto auto 20px;
  height: 3px;
  width: 20px;
  background: linear-gradient(90deg, #0000, #fff);
  transform-origin: right;
  transform: rotate(-20deg) translate(-20px);
  animation: n6 2s infinite;
}

.nature-6:after {
  inset: 100% auto auto -5px;
  animation-delay: .75s;
}

@keyframes n6 {
  100% {
    transform: rotate(-20deg) translate(120px)
  }
}`)
}
const dome7 = () => {
  download(`.nature-7 {
  width: 80px;
  height: 40px;
  background:
    radial-gradient(circle 11px at top, #0000 94%, #b0e5f3) 0 20px,
    radial-gradient(circle 11px at top, #0000 94%, #5dc1e4) 0 10px,
    radial-gradient(circle 11px at top, #0000 94%, #008cd9) 0 0;
  background-size: 20px 100%;
  background-repeat: repeat-x;
  animation: n7 1s infinite linear;
}

@keyframes n7 {
  50% {
    background-position: 10px 15px, -10px 12px, 15px 8px
  }

  100% {
    background-position: 20px 20px, -20px 10px, 20px 0px
  }
}`)
}
const dome8 = () => {
  download(`.nature-8 {
  width: 100px;
  height: 50px;
  border-radius: 100px 100px 0 0;
  position: relative;
  overflow: hidden;
}

.nature-8:before {
  content: "";
  position: absolute;
  inset: 0 0 -100%;
  background: radial-gradient(farthest-side at top, #0000 35%, #aa47be, #039be6, #26c6dc, #459e44, #f9ec44, #f68524, #fa3536, #0000) bottom/100% 50% no-repeat;
  animation: n8 2s infinite;
}

@keyframes n8 {

  0%,
  20% {
    transform: rotate(0)
  }

  40%,
  60% {
    transform: rotate(.5turn)
  }

  80%,
  100% {
    transform: rotate(1turn)
  }
}`)
}
const dome9 = () => {
  download(`.nature-9 {
  width: 80px;
  height: 40px;
  background: #4dbefa;
  position: relative;
  overflow: hidden;
  animation: n9-0 1.5s infinite steps(10);
}

.nature-9:before,
.nature-9:after {
  content: "";
  position: absolute;
  inset: -50%;
  --rad: radial-gradient(1px 4px, #eee 92%, #0000);
  background: var(--rad) 20% 0, var(--rad) 70% 7%;
  background-size: var(--w, 20px) var(--h, 18px);
  animation: n9-1 0.2s linear infinite;
  transform: skew(-10deg);
}

.nature-9:after {
  --h: 12px;
  --w: 16px;
  animation-duration: 0.3s;
}

@keyframes n9-0 {

  0%,
  15%,
  20%,
  30%,
  100% {
    background: #4dbefa
  }

  10%,
  22% {
    background: #7accf7
  }
}


@keyframes n9-1 {
  100% {
    transform: skew(-10deg) translateY(var(--h, 18px))
  }
}`)
}
const dome0 = () => {
  download(`.nature-10 {
  width: 80px;
  height: 40px;
  background:
    radial-gradient(circle 25px at top right, #ffd738 40%, #0000),
    #4dbefa;
  position: relative;
  overflow: hidden;
}

.nature-10:before,
.nature-10:after {
  content: "";
  position: absolute;
  top: 4px;
  left: -40px;
  width: 36px;
  height: 20px;
  --c: radial-gradient(farthest-side, #fff 96%, #0000);
  background:
    var(--c) 100% 100% /30% 60%,
    var(--c) 70% 0 /50% 100%,
    var(--c) 0 100% /36% 68%,
    var(--c) 27% 18% /26% 40%,
    linear-gradient(#fff 0 0) bottom/67% 58%;
  background-repeat: no-repeat;
  animation: n10 2s linear infinite;
}

.nature-10:after {
  top: 15px;
  --l: 200%;
}

@keyframes n10 {
  100% {
    left: var(--l, 105%)
  }
}`)
}
</script>
<template>
  <h1>自然景色款</h1>
  <div class="grid">
    <div class="nature-1" @click="dome1()" />
    <div class="nature-2" @click="dome2()" />
    <div class="nature-3" @click="dome3()" />
    <div class="nature-4" @click="dome4()" />
    <div class="nature-5" @click="dome5()" />
    <div class="nature-6" @click="dome6()" />
    <div class="nature-7" @click="dome7()" />
    <div class="nature-8" @click="dome8()" />
    <div class="nature-9" @click="dome9()" />
    <div class="nature-10" @click="dome0()" />
  </div>
</template>

<style scoped>
@import './style.css';
</style>
